<template lang="html">
	<div class="">
		<div class="search" v-if="isSearch == true">
			<div class="container" >
				<div class="input" >
						<input type="search" id='id-input-search'
						v-model='msg'
						@keyup.13="search()"
						@click="showBg()"
						@blur="clear()"
						placeholder="搜索"
						>
				</div>
				<div class="button" @click="search()">
					<!-- <div class="line">
					</div> -->
					<div class="">
						<img src="@/components/common/images/search.png" alt="">
					</div>
					<!-- <div class="title" @click='search()'> -->
						<!-- 提问 -->
					<!-- </div> -->
				</div>
			</div>

		</div>
	</div>

</template>

<script>
import { mapGetters } from 'vuex'
export default {
	data() {
		return {
			key: '',
			msg:'',
		}
	},
	created() {
		setTimeout(()=> {
			this.touchChange()
		}, 100)
	},
	methods: {
		// 更改 是否可触摸 状态
		touchChange() {
			if (this.isSearch) {
				console.log('禁止')
				$('#app').on('touchmove', function(e){
					e.preventDefault();
				})
			} else {
				console.log('允许')
				$('#app').unbind('touchmove')
			}
		},
		search() {
			this.log('enter')
			// 这里是点击 回车或图标后的搜索功能
			this.msg = '搜索成功'
			$('#id-input-search').blur()
		},
		showBg() {
			this.show = true
		},
		clear() {
			$('#id-input-search').blur()
			this.show = false
			this.$store.commit('isSearchSave', false)
		},
		ask() {
			this.$router.push({
				path: '/ask'
			})
		},
	},
	watch: {
		vuexmoduleid(){//模块id改变时
			this.msg=''
		},
		isSearch() {
			if (this.isSearch == true) {
				// 获取 input 焦点
				// let s = $('#id-input-search')
				setTimeout(()=> {
					// let s = document.getElementById('id-input-search').focus()
					let s = $('#id-input-search')
					this.log('s', s)
					s.focus()
				}, 100)
			}
		},
		msg(){
			this.$emit('queryinfo',this.msg);
		}
	},
	computed: {
		...mapGetters([
		  'vuexmoduleid',
		]),
		vuexmoduleid(){
			return this.$store.state.vuexmoduleid
		},
		isSearch() {
			this.log('isSearch', this.$store.state.isSearch)
			return this.$store.state.isSearch
		}
	}
}
</script>

<style lang="scss" scoped>
.search {
	margin-top: 5px;
	height: 105px;
	background: #26a2ff;
	position: relative;

	.container {
		position: relative;
		top: 20px;
		// top: -85px;
		left: 30px;
		display: flex;
		width: 690px;
		background: #fff;
		height: 68px;
		z-index: 100;
		.input {
			input {
				height: 68px;
				width: 620px;
				// background-image: url(@/components/common/images/search.png);
				// background-repeat: no-repeat;
				// background-size: 40px;
				// background-position: 30px 13px;
				outline: none;
				border: none;
				padding-left: 40px;
				line-height: 35px;
				font-size: 30px;
				padding-bottom: 3px;
			}
		}
		.button {
			display: flex;
			line-height: 68px;
			position: relative;
			.line {
				height: 30px;
				width: 2px;
				background: #999;
				position: relative;
				top: 18px;
				margin-right: 30px;
			}
			img {
				height: 30px;
				margin-right: 10px;
				position: relative;
				top: 7px;
			}
			.title {
				font-size: 30px;
				color: #666;
				line-height: 68px;
			}
		}

	}
	.searchBg {
		position: absolute;
		height: 100vh;
		width: 100vw;
		background: #ccc;
		// background: red;
		opacity: 0.4;
		top: 105px;
		z-index: 100;
	}
}
</style>
